<template>
  <div>
    <m-header :title="iNowTitle"></m-header>
    <div class="customer">
      <div class="account">
        <div class="account_form">
          <div class="account_line">
            <div class="account_title">银行卡号</div>
            <div class="account_input">
              <input type="text" name="" placeholder="请输入银行卡号" v-model="account_no"/>
            </div>
          </div>
          <p class="err_msg" v-if=" account_no == ''">请输入银行卡号</p>
          <p class="err_msg" v-else-if=" account_no.length>30 || isNaN(account_no)">请输入正确的银行卡号</p>
          <p class="err_msg" v-else></p>
          <div class="account_line">
            <div class="account_title">银行名称</div>
            <div class="account_input">
              <select class="select" v-model="account_bank">
                <option value="" disabled>选择银行</option>
                <option v-for="item in bankList">
                  {{item}}
                </option>
              </select>
            </div>
          </div>
          <p class="err_msg" v-if="account_bank=='-1'">请选择银行</p>
          <div class="account_line">
            <div class="account_title">收款人</div>
            <div class="account_input">
              <input type="text" name="" placeholder="持卡人真实姓名" v-model="account_name"/>
            </div>
          </div>
          <p class="err_msg" v-if=" account_name=='' ">请输入收款人姓名</p>
        </div>
        <div class="tips">
          <p>*首次申请提取返利金额，需要绑定银行卡账号 </p>
          <p>*仅限个人账户，再次提交默认修改原来提交的账号信息 </p>
        </div>
      </div>
    </div>
    <div class="btn_big bind_big_btn" @click="bindCard()">立即绑定</div>
  </div>
</template>

<script type="text/ecmascript-6">
  import MHeader from 'base/m-header/m-header'
  import {ERR_OK} from 'config/config'
  import {Toast} from 'mint-ui'
  import 'mint-ui/lib/toast/style.css';

  export default {
    data() {
      return {
        iNowTitle: '设置提现账号',
        account_no: '',
        account_bank: [],
        account_name: '',
        bankList: ["中国工商银行", "招商银行", "中国农业银行", "中国建设银行", "中国银行", "中国民生银行", "中国光大银行", "中信银行", "交通银行", "兴业银行", "上海浦东发展银行", "中国人民银行"]
      }
    },
    created() {
      this.getBankAccount()
    },
    methods: {
      getBankAccount() {
        this.$http({
          method: 'post',
          url: '/mobile/api/v1.0/channelAgent/getBankAccount'
        }).then((res) => {
          if (res.data.code == ERR_OK) {
            this.account_no = res.data.data.account_no;//银行卡号
            this.account_bank = res.data.data.account_bank;//银行名称
            this.account_name = res.data.data.account_name;//收款人姓名
          }
        }).catch((err) => {
          console.log(err)
        })
      },
      bindCard() {
        this.$http({
          method: 'post',
          url: '/mobile/api/v1.0/channelAgent/setBankAccount',
          data: {
            account_no: this.account_no,
            account_name: this.account_name,
            account_bank: this.account_bank
          }
        }).then((res) => {
          if (res.data.code == ERR_OK) {
            Toast("绑定成功")
            this.$router.push({
              path: 'main'
            })
          } else {
            Toast(res.data.msg)
          }
        }).catch((err) => {
          console.log(err)
        })
      }
    },
    components: {
      MHeader
    }
  }

</script>

<style lang="less" rel="stylesheet/less" scoped>
  input, select {
    border: 1px solid #dfdfdf !important
  }

  .account_line {
    margin-bottom: 0.4rem;
  }
</style>
